<template>
	<view>
		<view class="top">
			<view class="deng">
				<p class="biaotouzi">手机注册</p>
			</view>
			<view class="zhushi">
				<p class="zhuceshizi"></p>
			</view>
		</view>
		<view class="shuru">
			<view class="shoujikuang">
				<u--input placeholder="请输入手机号" border="bottom" clearable v-model="user.phone" fontSize="20px"
					style="height: 40px;"></u--input>
			</view>
			<view class="mimakuang">
				<u--input placeholder="请输入密码" border="bottom" clearable v-model="user.komh"
					style="height: 40px;padding-top: 20px" fontSize="20px"></u--input>
			</view>
 			<view class="yanzhengxiaoxi">
				<view class="tihuanzi" @click="tiaomima()" style="margin-top: 20px;margin-bottom: 20px;"></view>
				<view class="tihuanzi2" @click="tiaobangzhu()" style="margin-top: 20px;margin-bottom: 20px;">验证码登入</view>
			</view> 
			<button type="primary" @click="deng()" class="shiminganniu" style="background-color: #002fa7;">注册</button>
		</view>
		<view class="xieyi">
			<u-checkbox-group>
				<u-checkbox :checked="isDisable" shape="circle" @change="cc()">
				</u-checkbox>
				<view style="display: inline-block;">
					我已阅读并同意
					<span style="color: #0e2fa7;">用户协议</span>和
					<span style="color: #0e2fa7;">隐私协议</span>
				</view>
			</u-checkbox-group>
		</view>
	</view>
</template>

<script>


	export default {
		data() {
			return {
				isDisable: false,
                user:{
                    phone:'',
                    komh:''
                },
                tips: '',
                seconds: 60 ,//倒计时时长
                yzm:'',
                em:''
			}
		},
		mounted() {
			
		},
        onLoad() {
            
        },
		methods: {
            rand(min,max) {
                    return Math.floor(Math.random()*(max-min))+min;
                },
            codeChange(text) {
            	this.tips = text;
            },
            end() {
            	// uni.$u.toast('倒计时结束');
            },
            start() {       
            	this.em = this.rand(1000,9999);
                console.log(this.em)
            },
            getCode() {
            	if (this.isDisable == false) {
            		uni.showToast({
            			icon: "error",
            			title: '请同意用户协议'
            		});
            	} else {
            		if (this.$refs.uCode.canGetCode) {
            			// 模拟向后端请求验证码
            			uni.showLoading({
            				title: '正在获取验证码'
            			})
            			setTimeout(() => {
            				uni.hideLoading();
            				// 这里此提示会被this.start()方法中的提示覆盖
            				uni.$u.toast('验证码已发送');
            				// 通知验证码组件内部开始倒计时
            				this.$refs.uCode.start();
            			});
            		} else {
            			// uni.$u.toast('倒计时结束后再发送');
            		}
            	}
            },
			cc() {
				this.isDisable = !this.isDisable
			},
            tiaobangzhu(){
                uni.navigateTo({
             	url: '/pages/login/login',
             }, 300);
            },

			deng() {
				if (this.isDisable == true) {
                    if(this.user.phone.length==11){
                        if(this.user.phone!=null && this.user.phone!='' && this.user.komh!=null && this.user.komh!=''){
                                this.request("/users/login", 'POST',this.user).then((res) => {
                                    if(res.data.code==30041 || res.data.code==20011){
                                        console.log(res.data)
                                        uni.navigateTo({
                                        	url: '/pages/login/login',
                                        }, 300);
                                    }else{
                                        if(res.data.code==30040){
                                            uni.showToast({
                                            	icon: "error",
                                            	title: '账户存在',
                                            });
                                        }else{
                                           uni.showToast({
                                           	icon: "error",
                                           	title: '注册失败',
                                           }); 
                                        }
                                    
                                    }
                                })
                        }else{
                            uni.showToast({
                            	title: '不能为空',
                            });
                        }
                        
                    }else{
                        uni.showToast({
                        	icon: "error",
                        	title: '请输入正确手机号',
                        });
                    }
				} else {
                   uni.showToast({
                   	icon: "error",
                   	title: '请同意用户协议'
                   });
                    }
			},

		}
	}
</script>

<style>
	.top {
		padding-top: 35%;
		margin-left: 20px;
	}

	.biaotouzi {
		margin-left: 20px;
		font-size: 30px;
		color: #0e2fa7;
	}

	.zhuceshizi {
		font-size: 14px;
	}

	.yanzhengxiaoxi {
		display: flex;
	}

	.tihuanzi {
		width: 70%;
		color: #0e2fa7;
	}

	.tihuanzi2 {
		width: 28%;
		float: right;
	}

	.shiminganniu {
		margin:40px 0  20px  0;
		font-size: 36rpx;
		color: white;
		height: 80rpx;
		border-radius: 6px;
	}

	.zhushi {
		margin-top: 2%;
		margin-bottom: 3%;
		margin-left: 20px;
		color: #808080;
	}

	.shuru {
		width: 80%;
		text-align: center;
		margin-top: 20px;
		padding: 10px;
		text-align: left;
		border-radius: 8px;
		color: rgba(0, 0, 0, 0.7);
		font-size: 12px;
		margin: 0 auto;
	}

	.mimakuang {
	
        border-bottom: 1px solid black;
	}

	.xieyi {
		width: 70%;
		text-align: center;
		font-size: 14px;
		margin: 0 auto;
	}

	.wrap {
		width: 40%;
		float: right;
		margin-top: -40px;
		z-index: 99;
	}

	.shoujikuang {
		margin-bottom: 20px;
        border-bottom: 1px solid black;
	}
</style>